<script setup>
defineOptions({
    name: "management"
});
import { ref } from "vue";
import { getListAgentDept, getListAgent, getListMerchantName, getListDtlAgente } from "@/api/merchant";
import { useRouter } from "vue-router";
import { formatDateTime } from '@/utils'
const router = useRouter();

const size = ref("default");
const background = ref(false);
const disabled = ref(false);
const pageTotal = ref(0);
const currentPage = ref(1);
const pickerValue = ref("");
const inputMerchant = ref("");

const serviceCompany = ref([])
const serviceCompanyVal = ref('')

const loading = ref(false)
const loadingTable = ref(false)

const tableData = ref([]);

const merchantOptions = ref([]);
const merchantSelectValue = ref("");

const openAmountOption = ref([
    {
        isInvoicingAmount: 0,
        text: "无"
    },
    {
        isInvoicingAmount: 1,
        text: "有"
    },
    {
        isInvoicingAmount: 2,
        text: "有预开"
    },
])
const amountOptionValue = ref('')
const amountOptionOptions = ref([])

const tablePageSize = ref(false)
const handleSizeChange = (val) => {
    tablePageSize.value = val
    currentPage.value = 1
    getListTableData({ pageNum: 1 });
};

const handleCurrentChange = (val) => {
    getListTableData({ pageNum: val});
};

function getListTableData(params) {
    const [start, end] = getPickerTime()
    const [deptId] = merchantOptions.value
    const _params = {
        pageNum: 1,
        pageSize: tablePageSize.value,
        createTimeStart: start,
        createTimeEnd: end,
        total: 0,
        ...params
    };
    if (deptId && deptId.deptId) {
        _params.deptId = deptId.deptId
    }

    if (amountOptionValue.value !== '') {
        _params.isInvoicingAmount = amountOptionValue.value
    }
    if (inputMerchant.value !=='') {
        _params.merchantsName = inputMerchant.value
    }
    if (serviceCompanyVal.value !== '') {
        _params.taxSourcesId = serviceCompanyVal.value
        _params.total = 19
    }
    loadingTable.value = true
    getListAgent({ ..._params }).then((res) => {
        tableData.value = res.rows;
        pageTotal.value = res.total;
    }).finally(()=> {
        loadingTable.value = false
    });
}
getListTableData();

// 获取selec 数据
getListAgentDept().then((res) => {
    merchantOptions.value = res.data;
});

// 获取select数据
getListDtlAgente({ type: 1 }).then((res) => {
    serviceCompany.value = res.rows
})
const jumpClick = id => {
    router.push("/merchant/management/detail?id=" + id);
};

// 重置页面
const onReset = () => {
    pickerValue.value = ''
    amountOptionValue.value = ''
    inputMerchant.value = ''
    serviceCompanyVal.value = ''
    merchantSelectValue.value = ''
    pageTotal.value = 0
    currentPage.value = 1
    tablePageSize.value = 10
    getListTableData();
}
// 输入选择商户的时候
const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        getListMerchantName({ merchantsName: query }).then((res) => {
            amountOptionOptions.value = res.rows
        }).finally(() => {
            loading.value = false
        })
    }
}
// 时间picker变化的时候
const pickerChange = () => {
    getListTableData({
        total: 6
    })
}
const merchantSelectChange = () => {
    const [deptId] = merchantOptions.value
    getListTableData({ deptId: deptId.deptId })
}
const amountSelectChange = () => {
    getListTableData()
}

function getPickerTime() {
    const [startTime, endTime] = pickerValue.value
    const start = new Date(startTime)
    const end = new Date(endTime)
    return startTime ? [formatDateTime(start), formatDateTime(end)] : ''
}
getPickerTime()

</script>
<template>
    <div class="c-page">
        <div class="c-page__search">
            <div class="block">
                <el-select @change="amountSelectChange" remote reserve-keyword filterable :loading="loading" v-model="inputMerchant"
                    :remote-method="remoteMethod" size="large" placeholder="请输入选择商户">
                    <el-option v-for="item in amountOptionOptions" :key="item.id" :label="item.merchantsName"
                        :value="item.merchantsName" />
                </el-select>
            </div>
            <div class="select">
                <el-select size="large" @change="merchantSelectChange" v-model="merchantSelectValue"
                    placeholder="请选择商户来源">
                    <el-option v-for="item in merchantOptions" :key="item.deptId" :label="item.deptName"
                        :value="item.deptId">
                    </el-option>
                </el-select>
            </div>
            <div class="select">
                <el-select size="large" v-model="serviceCompanyVal" placeholder="请选择服务公司">
                    <el-option v-for="item in serviceCompany" :key="item.type" :label="item.name" :value="item.type">
                    </el-option>
                </el-select>
            </div>
            <div class="select">
                <el-select size="large" @change="amountSelectChange" v-model="amountOptionValue" placeholder="可开票金额">
                    <el-option v-for="item in openAmountOption" :key="item.isInvoicingAmount" :label="item.text"
                        :value="item.isInvoicingAmount">
                    </el-option>
                </el-select>
            </div>
            <div class="time zd">
                <el-date-picker @change="pickerChange" v-model="pickerValue" size="large" type="daterange"
                    range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
                </el-date-picker>
            </div>
            <div class="search-btn">
                <el-button @click="onReset" size="large">重置</el-button>
                <el-button @click="getListTableData" type="primary" size="large">查询</el-button>
            </div>
        </div>
        <div class="c-page__bg">
            <el-table :data="tableData" v-loading="loadingTable">
                <el-table-column type="expand" #default="props" label="">
                    <el-table style="width: 100%" width="1340px" :data="props.row.dealList">
                        <el-table-column label="状态协议" prop="merchantsDealStateDisplay">
                        </el-table-column>
                        <el-table-column label="服务公司" prop="taxSourcesIdDisplay" />
                        <el-table-column label="帐户余额（总）" prop="actualAmount" />
                        <el-table-column label="开票金额" width="180">
                            <template #default="{ row }">
                                <p>申请金额：{{ row.amountInApplication }}</p>
                                <p>可开金额：{{ row.invoicingAmount }}</p>
                                <p>已开金额：{{ row.cumulativeInvoiceAmount }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="费率" prop="merchantsServiceRateDisplay" />
                        <el-table-column label="签约方式" prop="contractWayDisplay" />
                        <el-table-column label="项目信息" prop="projectContent" />
                        <el-table-column label="创建时间" prop="createTime" />
                        <el-table-column label="合同状态" prop="contractStateDisplay" />
                    </el-table>
                </el-table-column>
                <el-table-column prop="merchantsInfoNumber" label="商户ID"></el-table-column>
                <el-table-column prop="electricFullName" label="商户名称">

                </el-table-column>
                <el-table-column prop="branchIdDisplay" label="商户来源">
                </el-table-column>
                <el-table-column prop="dealCount" label="签约数量"> </el-table-column>
                <el-table-column prop="createTime" label="创建时间"> </el-table-column>
                <el-table-column prop="auditStateDisplay" label="商户状态">
                    <template #default="{ row }">
                        <div class="c-flex-row">
                            <span v-if="row.auditStateDisplay === '审核通过'" class="c-dot-success"></span>
                            <span v-else class="c-dot-success"></span>
                            {{ row.auditStateDisplay }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column #default="{ row }" label="操作">
                    <span class="c-text-primary" @click="jumpClick(row.id)">详情</span>
                </el-table-column>
            </el-table>
            <div class="pagination-block">
                <el-pagination v-model:current-page="currentPage" :page-size="tablePageSize" :page-sizes="[10,20,30]" :size="size" :disabled="disabled"
                    :background="background" layout="total, sizes, prev, pager, next" :total="pageTotal"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.block,
.select {
    padding-bottom: 15px;
    padding-right: 30px;
    width: 23%;
}

.time {
    padding-bottom: 15px;
    padding-right: 15px;
}

.c-page__bg {
    display: flex;
    width: 100%;
    height: 100%;
    padding-bottom: 24px;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.c-dot-success,
.c-dot-info {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #43bf0a;
}

.flex-row {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: #262626;
}

.c-dot-info {
    background-color: #bfbfbf;
}

.pagination-block {
    padding-top: 20px;
    padding-right: 10px;
    display: flex;
    justify-content: flex-end;
}

.c-text-primary {
    font-size: 14px;
    color: #1c9fff;
    white-space: nowrap;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
}
</style>
